<template>
  <div class="w-full h-full px-10 py-5 flex flex-col gap-2">
    <div class="font-bold text-sm">拼接导出</div>
    <div class="flex-1 bg-white shadow-lg border border-black/10 p-12 box-border">
      <div class="w-full h-1/3 bg-[#F1F3FF]">
        <img :src="img" class="max-h-full" />
      </div>
      <div class="mt-16">
        <a-form
          class="w-[600px]"
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item
            label="推送设定帧数"
            name="fps"
            :rules="[{ required: true, message: '请输入帧数!' }]"
          >
            <a-input v-model:value="formState.fps" />
          </a-form-item>
          <a-form-item
            label="是否启用硬件加速"
            name="GPUAcceleration"
            :rules="[{ required: true }]"
          >
            <a-select v-model:value="formState.GPUAcceleration">
              <a-select-option value="true">是</a-select-option>
              <a-select-option value="false">否</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="广播推送" name="BroadcastPush" :rules="[{ required: true }]">
            <a-select v-model:value="formState.BroadcastPush">
              <a-select-option value="true">是</a-select-option>
              <a-select-option value="false">否</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit" block class="!mt-6">导出</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { useImageStore } from '@renderer/stores/image'

const imageStore = useImageStore()
const img = ref('')
onMounted(() => {
  console.log('🐯 ~ imageStore:', imageStore)
  img.value = imageStore.saveImage.value
})

interface FormState {
  fps: string
  GPUAcceleration: string
  BroadcastPush: string
}

const formState = reactive<FormState>({
  fps: '24',
  GPUAcceleration: 'true',
  BroadcastPush: 'true'
})
const onFinish = (values: any) => {
  console.log('Success:', values)
  
  const a = document.createElement('a')
  a.download = '拼接图.png'
  a.href = img.value
  a.click()
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}
</script>

<style scoped></style>
